const vm = new Vue({
    el: "#app",
    data: {
        // 操作行
        // 搜索关键字
        searchKeyWords: undefined,
        // 搜索类型
        searchType: "1",
        // 表格初始数据
        empData: [
            {
                EMPNO: 7369,
                ENAME: "SMITH",
                JOB: "1",
                MGR: "7902",
                HIREDATE: "1980-12-17",
                SAL: 800.00,
                COMM: null,
                DEPTNO: 20
            },
            {
                EMPNO: 7499,
                ENAME: "ALLEN",
                JOB: "2",
                MGR: "7698",
                HIREDATE: "1981-02-20",
                SAL: 1600.00,
                COMM: 300,
                DEPTNO: 30
            },
            {
                EMPNO: 7521,
                ENAME: "WARD",
                JOB: "2",
                MGR: "7698",
                HIREDATE: "1981-02-22",
                SAL: 1250.00,
                COMM: 500,
                DEPTNO: 30
            },
            {
                EMPNO: 7566,
                ENAME: "JONES",
                JOB: "3",
                MGR: "7839",
                HIREDATE: "1981-04-02",
                SAL: 2975.00,
                COMM: null,
                DEPTNO: 20
            },
            {
                EMPNO: 7654,
                ENAME: "MARTIN",
                JOB: "2",
                MGR: "7698",
                HIREDATE: "1981-09-28",
                SAL: 1250.00,
                COMM: 1400,
                DEPTNO: 30
            },
            {
                EMPNO: 7698,
                ENAME: "BLAKE",
                JOB: "3",
                MGR: "7839",
                HIREDATE: "1981-05-01",
                SAL: 2850.00,
                COMM: null,
                DEPTNO: 30
            },
            {
                EMPNO: 7782,
                ENAME: "CLARK",
                JOB: "3",
                MGR: "7839",
                HIREDATE: "1981-06-09",
                SAL: 2450.00,
                COMM: null,
                DEPTNO: 10
            },
            {
                EMPNO: 7788,
                ENAME: "SCOTT",
                JOB: "5",
                MGR: "7566",
                HIREDATE: "1987-04-19",
                SAL: 3000.00,
                COMM: null,
                DEPTNO: 20
            },
            {
                EMPNO: 7800,
                ENAME: "JACK",
                JOB: "1",
                MGR: "7839",
                HIREDATE: "1987-04-19",
                SAL: 1790.00,
                COMM: 300.00,
                DEPTNO: null
            },
            {
                EMPNO: 7839,
                ENAME: "KING",
                JOB: "4",
                MGR: null,
                HIREDATE: "1981-11-17",
                SAL: 1790.00,
                COMM: 300,
                DEPTNO: 10
            },
            {
                EMPNO: 7844,
                ENAME: "TURNER",
                JOB: "2",
                MGR: "7698",
                HIREDATE: "1981-09-08",
                SAL: 1500.00,
                COMM: null,
                DEPTNO: 30
            },
            {
                EMPNO: 7876,
                ENAME: "ADAMS",
                JOB: "1",
                MGR: "7788",
                HIREDATE: "1987-05-23",
                SAL: 1100.00,
                COMM: 0.0,
                DEPTNO: 20
            },
            {
                EMPNO: 7900,
                ENAME: "JAMES",
                JOB: "1",
                MGR: "7698",
                HIREDATE: "1981-12-03",
                SAL: 950.00,
                COMM: null,
                DEPTNO: 30
            },
            {
                EMPNO: 7902,
                ENAME: "FORD",
                JOB: "5",
                MGR: "7566",
                HIREDATE: "1981-12-03",
                SAL: 3000.00,
                COMM: null,
                DEPTNO: 20
            },
            {
                EMPNO: 7934,
                ENAME: "MILLER",
                JOB: "1",
                MGR: "7782",
                HIREDATE: "1982-01-23",
                SAL: 1300.00,
                COMM: null,
                DEPTNO: 10
            },
            {
                EMPNO: 8011,
                ENAME: "tom",
                JOB: "2",
                MGR: "7839",
                HIREDATE: "2024-09-01",
                SAL: 3000.00,
                COMM: 10,
                DEPTNO: 20
            },
            {
                EMPNO: 8012,
                ENAME: "jack",
                JOB: "1",
                MGR: "7839",
                HIREDATE: "2024-09-01",
                SAL: 1300.00,
                COMM: 10,
                DEPTNO: 20
            },
        ],
        // 分页组件数据
        pageInfo: {
            total: 30,
            pageSize: 10,
            pageNum: 2,
            sizes: [2, 3, 5, 10, 20],
        },
        // 添加员工信息弹框是否显示属性
        addEmpFlag: false,
        // 添加员工信息表单的对象
        addEmpObj: {
            EMPNO: undefined,
            ENAME: undefined,
            JOB: "0",
            MGR: undefined,
            HIREDATE: undefined,
            SAL: undefined,
            COMM: undefined,
            DEPTNO: undefined,
        },
        // 校验添加员工信息表单规则
        ruleRegs: {
            ENAME: [
                {required: true, message: "姓名不能为空", trigger: "blur"},
                {min: 2, max: 20, message: "姓名长度为2-20位", trigger: "blur"},
            ],
            SAL: [
                {required: true, message: "薪资不能为空", trigger: "blur"},
            ],
        },
        // 编辑员工信息弹框是否显示属性
        editEmpFlag: false,
        // 编辑员工信息表单的对象
        editEmpObj: {
            EMPNO: undefined,
            ENAME: undefined,
            JOB: undefined,
            MGR: undefined,
            HIREDATE: undefined,
            SAL: undefined,
            COMM: undefined,
            DEPTNO: undefined,
        },
        // 创建一个存放要删除的 ids 数组
        ids: [],
    },
    methods: {
        // 展示添加员工信息弹框
        addEmpPage: function () {
            this.addEmpFlag = true;
        },

        // 职业格式转换
        JOBFormat: function (rowData) {
            switch (rowData.JOB) {
                case "1":
                    return "CLERK";
                case "2":
                    return "SALESMAN";
                case "3":
                    return "MANAGER";
                case "4":
                    return "PRESIDENT";
                case "5":
                    return "ANALYST";
            }
        },

        // 关闭添加员工信息表单页面时重置表单数据
        resetAddEmpForm: function () {
            this.$refs["addEmpForm"].resetFields();
        },

        // 提交添加表单时校验所填写的内容是否全部合法,合法则添加到 empData 数组中
        submitAddEmpForm: function () {
            this.$refs["addEmpForm"].validate(flag => {
                if (flag) {
                    let addObj = {
                        EMPNO: undefined,
                        ENAME: undefined,
                        JOB: "0",
                        MGR: undefined,
                        HIREDATE: undefined,
                        SAL: undefined,
                        COMM: undefined,
                        DEPTNO: undefined,
                    };
                    // 日期格式转换
                    let hiredate = this.addEmpObj.HIREDATE;
                    let year = hiredate.getFullYear();
                    let month = hiredate.getMonth();
                    month++;
                    if (month < 10) {
                        month = "0" + month;
                    }
                    let day = hiredate.getDate();
                    addObj.EMPNO = this.empData[this.empData.length - 1].EMPNO + 1;
                    addObj.ENAME = this.addEmpObj.ENAME;
                    addObj.JOB = this.addEmpObj.JOB;
                    addObj.MGR = this.addEmpObj.MGR;
                    addObj.HIREDATE = year + "-" + month + "-" + day;
                    addObj.SAL = this.addEmpObj.SAL;
                    addObj.COMM = this.addEmpObj.COMM;
                    addObj.DEPTNO = this.addEmpObj.DEPTNO;
                    this.empData.push(addObj);
                    this.$notify({
                        showClose: true,
                        title: "通知",
                        message: "用户信息添加成功",
                        type: "success",
                    })
                    this.addEmpFlag = false;
                } else {
                    this.$alert("表单提交失败，请确认填写内容是否全都合法", "温馨提示", {type: "success"});
                }
            });
        },


        // 编辑表单页面
        // 展示编辑表单页面并且数据回显
        editEmpPage: function (scope) {
            var row = scope.row;
            let editEmpObj = this.editEmpObj;
            editEmpObj.EMPNO = row.EMPNO;
            editEmpObj.ENAME = row.ENAME;
            editEmpObj.JOB = row.JOB;
            editEmpObj.MGR = row.MGR;
            editEmpObj.HIREDATE = row.HIREDATE;
            editEmpObj.SAL = row.SAL;
            editEmpObj.COMM = row.COMM;
            editEmpObj.DEPTNO = row.DEPTNO;
            // 显示编辑页面弹出
            this.editEmpFlag = true;
        },

        // 关闭编辑员工信息表单页面时重置表单数据
        resetEditEmpForm: function () {
            this.$refs["editEmpForm"].resetFields();
        },

        // 提交编辑表单时校验所填写的内容是否全部合法,合法则添加到 empData 数组中
        submitEditEmpForm: function () {
            this.$refs["editEmpForm"].validate(flag => {
                if (flag) {
                    for (let i = 0; i < this.empData.length; i++) {
                        var editEmpObj = this.editEmpObj;
                        let empData = this.empData[i];
                        if (editEmpObj.EMPNO == empData.EMPNO) {
                            empData.ENAME = editEmpObj.ENAME;
                            empData.JOB = editEmpObj.JOB;
                            empData.MGR = editEmpObj.MGR;
                            // 将日期先转为 Date 类型
                            let hiredate = new Date(editEmpObj.HIREDATE);
                            let year = hiredate.getFullYear();
                            let month = hiredate.getMonth();
                            month++;
                            if (month < 10) {
                                month = "0" + month;
                            }
                            let day = hiredate.getDate();
                            if (day < 10) {
                                day = "0" + day;
                            }
                            empData.HIREDATE = year + "-" + month + "-" + day;
                            empData.SAL = editEmpObj.SAL;
                            empData.COMM = editEmpObj.COMM;
                            empData.DEPTNO = editEmpObj.DEPTNO;
                        }
                    }
                    ;
                    this.$alert("提交成功", "温馨提示", {type: "success"});
                    this.addEmpFlag = false;
                    this.$notify({
                        showClose: true,
                        title: "通知",
                        message: `员工编号为${editEmpObj.EMPNO}的员工信息修改成功`,
                        type: "success",
                    });
                    this.editEmpFlag = false;
                } else {
                    this.$alert("表单提交失败，请确认填写内容是否全都合法", "温馨提示", {type: "success"});
                }
            });
        },


        // 删除
        // 点击删除按钮删除一行
        deleteOneRowData: function (scope) {
            this.$confirm("您确定要删除这一行吗？")
                .then(() => {
                    let row = scope.row;
                    this.empData = this.empData.filter(item => {
                        return item.EMPNO != row.EMPNO;
                    })
                    this.$notify({
                        showClose: true,
                        title: "通知",
                        message: `员工编号为${row.EMPNO}的员工数据行删除成功`,
                        type: "success",
                    })
                })
        },

        // 批量删除
        // 全选
        selectAllRow: function (rowsData) {
            this.ids = rowsData.map(item => {
                return item.EMPNO;
            });
        },
        // 一次选中一条
        selectOneRow: function (rowData) {
            this.ids = rowData.map(item => {
                return item.EMPNO;
            });
        },
        // 批量删除，根据 ids 数组中的 id 对 empData 进行删除/过滤
        DeleteMultiple: function () {
            if (this.ids.length == 0) {
                this.$alert("请选择删除的行", "温馨提示", {type: "warning"});
            } else {
                this.$confirm("您确定要删除这些数据吗？")
                    .then(() => {
                        this.empData = this.empData.filter(item => {
                            return this.ids.indexOf(item.EMPNO) == -1;
                        })
                        this.$notify({
                            showClose: true,
                            title: "通知",
                            message: `批量删除成功`,
                            type: "success",
                        })
                    })
            }
        },


        // 搜索
        searchBtn: function () {
            this.empData = [
                {
                    EMPNO: 7369,
                    ENAME: "SMITH",
                    JOB: "1",
                    MGR: "7902",
                    HIREDATE: "1980-12-17",
                    SAL: 800.00,
                    COMM: null,
                    DEPTNO: 20
                },
                {
                    EMPNO: 7499,
                    ENAME: "ALLEN",
                    JOB: "2",
                    MGR: "7698",
                    HIREDATE: "1981-02-20",
                    SAL: 1600.00,
                    COMM: 300,
                    DEPTNO: 30
                },
                {
                    EMPNO: 7521,
                    ENAME: "WARD",
                    JOB: "2",
                    MGR: "7698",
                    HIREDATE: "1981-02-22",
                    SAL: 1250.00,
                    COMM: 500,
                    DEPTNO: 30
                },
                {
                    EMPNO: 7566,
                    ENAME: "JONES",
                    JOB: "3",
                    MGR: "7839",
                    HIREDATE: "1981-04-02",
                    SAL: 2975.00,
                    COMM: null,
                    DEPTNO: 20
                },
                {
                    EMPNO: 7654,
                    ENAME: "MARTIN",
                    JOB: "2",
                    MGR: "7698",
                    HIREDATE: "1981-09-28",
                    SAL: 1250.00,
                    COMM: 1400,
                    DEPTNO: 30
                },
                {
                    EMPNO: 7698,
                    ENAME: "BLAKE",
                    JOB: "3",
                    MGR: "7839",
                    HIREDATE: "1981-05-01",
                    SAL: 2850.00,
                    COMM: null,
                    DEPTNO: 30
                },
                {
                    EMPNO: 7782,
                    ENAME: "CLARK",
                    JOB: "3",
                    MGR: "7839",
                    HIREDATE: "1981-06-09",
                    SAL: 2450.00,
                    COMM: null,
                    DEPTNO: 10
                },
                {
                    EMPNO: 7788,
                    ENAME: "SCOTT",
                    JOB: "5",
                    MGR: "7566",
                    HIREDATE: "1987-04-19",
                    SAL: 3000.00,
                    COMM: null,
                    DEPTNO: 20
                },
                {
                    EMPNO: 7800,
                    ENAME: "JACK",
                    JOB: "1",
                    MGR: "7839",
                    HIREDATE: "1987-04-19",
                    SAL: 1790.00,
                    COMM: 300.00,
                    DEPTNO: null
                },
                {
                    EMPNO: 7839,
                    ENAME: "KING",
                    JOB: "4",
                    MGR: null,
                    HIREDATE: "1981-11-17",
                    SAL: 1790.00,
                    COMM: 300,
                    DEPTNO: 10
                },
                {
                    EMPNO: 7844,
                    ENAME: "TURNER",
                    JOB: "2",
                    MGR: "7698",
                    HIREDATE: "1981-09-08",
                    SAL: 1500.00,
                    COMM: null,
                    DEPTNO: 30
                },
                {
                    EMPNO: 7876,
                    ENAME: "ADAMS",
                    JOB: "1",
                    MGR: "7788",
                    HIREDATE: "1987-05-23",
                    SAL: 1100.00,
                    COMM: 0.0,
                    DEPTNO: 20
                },
                {
                    EMPNO: 7900,
                    ENAME: "JAMES",
                    JOB: "1",
                    MGR: "7698",
                    HIREDATE: "1981-12-03",
                    SAL: 950.00,
                    COMM: null,
                    DEPTNO: 30
                },
                {
                    EMPNO: 7902,
                    ENAME: "FORD",
                    JOB: "5",
                    MGR: "7566",
                    HIREDATE: "1981-12-03",
                    SAL: 3000.00,
                    COMM: null,
                    DEPTNO: 20
                },
                {
                    EMPNO: 7934,
                    ENAME: "MILLER",
                    JOB: "1",
                    MGR: "7782",
                    HIREDATE: "1982-01-23",
                    SAL: 1300.00,
                    COMM: null,
                    DEPTNO: 10
                },
                {
                    EMPNO: 8011,
                    ENAME: "tom",
                    JOB: "2",
                    MGR: "7839",
                    HIREDATE: "2024-09-01",
                    SAL: 3000.00,
                    COMM: 10,
                    DEPTNO: 20
                },
                {
                    EMPNO: 8012,
                    ENAME: "jack",
                    JOB: "1",
                    MGR: "7839",
                    HIREDATE: "2024-09-01",
                    SAL: 1300.00,
                    COMM: 10,
                    DEPTNO: 20
                },
            ];
            switch (this.searchType) {
                case "1":
                    // 根据员工编号搜索
                    this.empData = this.empData.filter(item => {
                        return String(item.EMPNO).indexOf(this.searchKeyWords) != -1
                    })
                    this.$notify({
                        showClose: true,
                        title: "状态",
                        message: "查询成功",
                        type: "success",
                    })
                    break;
                    break;
                case "2":
                    // 根据员工姓名搜索
                    this.empData = this.empData.filter(item => {
                        return item.ENAME.indexOf(this.searchKeyWords) != -1
                    })
                    this.$notify({
                        showClose: true,
                        title: "状态",
                        message: "查询成功",
                        type: "success",
                    })
                    break;
                case "3":
                    // 根据员工部门搜索
                    this.empData = this.empData.filter(item => {
                        return String(item.DEPTNO).indexOf(this.searchKeyWords) != -1
                    })
                    this.$notify({
                        showClose: true,
                        title: "状态",
                        message: "查询成功",
                        type: "success",
                    })
                    break;
            }
        }
    },
});
